/* eslint-disable */
import { request } from './request.js'

const tableConfig = {
  // 请求列表数据的配置
  // 可以是一个对象，包含一下的配置
  // 也可以是一个方法，就相当于requestApi.handler，requestApi(params) { return request(params) }
  requestApi: {
    // params包含当前页数page、页条数pageSize
    handler(params) {
      console.log(params, 'params');
      return request(params)
    },
    // 页条数
    pageSize: 20,
    // 请求成功，回调参数为返回的结果
    onSuccess(response) {
      console.log(response, '请求成功');
    },
    // 请求成功，回调参数为捕获到的错误
    onError(error) {
      console.log(error, '请求错误');
    },
    // 请求完成，无论成功或者失败都会执行
    onComplete() {
      console.log('请求完成');
    }
  },

  // 额外的请求参数
  extraRequestParams: {
    type: 1
  },

  handle: {
    btnSize: 'large'
  },

  // 删除按钮
  // 可以是一个方法，也可以是一个对象
  // delete() {
  //   return Promise.reject(null)
  // },
  delete: {
    // 默认就是"删除"
    name: '删除',
    handler() {
      return Promise.reject(null)
    },
    // 绑定给按钮的属性
    options: { type: 'success' },
    // 默认为true，确认弹框，可以是boolean类型，也可以是string类型
    // confirm: '你确定要删除这个吗？',
    confirm: true
  },

  // 配置表格列
  columns: [
    {
      options: {
        type: 'selection'
      }
    },
    {
      // 本表格列的字段名
      prop: 'column-0',
      // 本表格列的表格头名
      label: 'column-0',
      // 本表格列的宽度，但是存在缓存的话，则会使用缓存的宽度
      width: '200',
      // el-table-column的属性
      options: {},
      // 字典映射
      // 一般情况下是一个数组
      // 如果需要远程获取，也可以使用一个函数，支持异步
      // async dicts() {
      //   const res = await getDicts()
      //   return res.map(item => ({
      //     label: item.label,
      //     value: item.value
      //   }))
      // },
      dicts: [
        {
          // 结果
          label: '表格第1列的第1行',
          // 属性
          value: 'column-0--row-1--page-1',
          // 字体颜色
          color: '#f73131'
        }
      ],
      // 转换
      transform(val) {
        if (typeof val === 'number') {
          return val.toFixed(2)
        } else {
          return val
        }
      },
      // 自定义内容，支持jsx
      // arg是一个对象，包含value属性（原本要渲染的文本）
      // 还包含el-table-column作用域插槽的属性
      // 如果提供了dicts，还会包含一个data属性，为字典匹配到的结果
      // { data: undefined, value: '文本', row: {}, $index: 1 }
      render(h, arg) {
        return h('div', arg.value)
      }
    },
    ...[...Array(19)].map((_, index) => {
      return {
        prop: 'column-' + (index + 1),
        label: 'column-' + (index + 1),
        width: '200',
        options: { align: 'center' }
      }
    })
  ],

  // 目前用于缓存VTable的表格列宽度
  // 设置了之后，用户调整表格列宽度，会使用localStorage记忆起来
  name: 'Crud',

  useSetting: true,

  // 是在在表格一加载完成，就调用requestApi去获取数据，默认true
  immediate: true,

  // 字段映射，查看lib/default.js的fieldsMap
  // 默认使用default.js的字段映射，可以使用本配置覆盖掉
  fieldsMap: {
    list: 'data.record',
    totalCount: 'data.totalCount',
    totalPages: 'data.totalPages',
    pageSize: 'data.pageSize'
  },

  // 自定义空列表或者错误的内容显示
  // isError是否错误
  // refresh刷新的方法
  emptyContentRender(h, { isError, refresh }) {
    return h('div', null, ['空'])
  },

  // 绑定给el-table的属性
  options: {
    border: true
  },

  // 绑定给el-table的监听事件
  listeners: {
    selectionChange(e) {
      console.log(e, 'e');
    }
  }
}

const searchBarConfig = {
  items: [
    {
      column: 'column-0',
      width: 250,
      defaultValue: 'column-0--row-1--page-1'
    },
    {
      label: '时间',
      prop: 'time',
      component: 'date'
    }
  ],
  useResetButton: true
}

const createAndUpdateConfig = {
  items: [
    {
      prop: 'startTime',
      label: 'startTime',
      component: 'date',
      options: { valueFormat: 'HH:mm:ss' },
      required: true,
    },
    {
      prop: 'endTime',
      label: 'endTime',
      component: 'date',
      options: { valueFormat: 'HH:mm:ss' },
      required: true,
    },
    {
      prop: 'singleLimitAmount',
      label: 'singleLimitAmount',
      component: 'input',
      show: (_, isUpdate) => !isUpdate,
      options: { type: 'number' },
      required: true,
      width: 450
    },
    {
      prop: 'totalLimitAmount',
      label: 'totalLimitAmount',
      component: 'input',
      options: { type: 'number' },
      required: true,
    },
    {
      column: 'column-0',
      component: 'radio',
    }
  ],
  onShow() {
    console.log(arguments, 'args');
  },
  onHide() {
    console.log('关闭');
  },
  async transformParams(params) {
    params.p = 1
    return params
  },
  create() {},
  update() {}
}

export const crudAttrs = {
  // 目前用于VTable组件，缓存VTable的表格列宽度
  name: 'Crud',
  // 表格配置
  tableConfig,
  // 搜索栏配置
  searchBarConfig,
  // 新增或编辑的配置
  createAndUpdateConfig
}